<script>
import { mapGetters } from 'vuex';
import { heatMap } from '../../chartconfig/config/map-config.js';
import * as types from '../../../../store/types.js';
import * as utils from '../../../../utils/helps.js';
// 默认配置

export default {
  name: 'HeatMapConfig',
  props: {
    options: {
      type: Object,
      default: () => {},
    },
    subjectId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      maplayerOptions: {},
      selected: '1',
      minOpacity: 100,
      gradient: {
        0.1: '',
        0.2: '',
        0.3: '',
        0.4: 'blue',
        0.5: '',
        0.6: 'lime',
        0.7: '',
        0.8: 'yellow',
        0.9: '',
        1: 'red',
      },
      gradientColor: [],
    };
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
    chartOptions() {
      return this.controls[this.currentId].options;
    },
  },
  watch: {
    subjectId(newVal) {
      if (newVal !== '') {
        this.getheatMapOptions(newVal);
      }
    },
  },
  beforeCreate() {
    this.minOpacity = heatMap.minOpacity * 100;
    this.maplayerOptions = { ...heatMap };
  },
  beforeMount() {
    this.gradient = Object.assign({}, this.gradient, heatMap.gradient);
    // this.setGradient();
  },
  mounted() {
    this.getheatMapOptions(this.subjectId);
  },
  events: {
    'on-setconfig': 'setConfig',
  },
  methods: {
    setConfig(subId) {
      this.subjectId = subId;
    },
    // 设置渐变
    setGradient() {
      this.gradientColor = [];
      // 设置渐变属性
      let lastColor = {};
      for (const key in this.gradient) {
        if (key === '1') {
          lastColor = {
            index: key,
            value: this.gradient[key],
          };
        } else {
          this.gradientColor.push({
            index: key,
            value: this.gradient[key],
          });
        }
      }
      this.gradientColor.push(lastColor);
    },
    // 拿到options
    getheatMapOptions(subjectId) {
      if (this.subjectId !== '') {
        if (this.chartOptions.HeatMap) {
          let heatMapOptions = this.chartOptions.HeatMap.filter(
            item => item.subjectId === subjectId
          );
          heatMapOptions = utils.deepCopy(heatMapOptions);
          this.minOpacity = heatMapOptions[0].options.minOpacity * 100;
          this.gradient = Object.assign({}, this.gradient, heatMapOptions[0].options.gradient);
          this.setGradient();
          this.maplayerOptions = {
            ...heatMapOptions[0].options,
            ...this.minOpacity,
          };
        }
      }
    },
    //提交配置到store
    updateOptions() {
      let currentControl = this.controls[this.currentId];
      const maplayerOptions = utils.deepCopy(this.maplayerOptions);
      maplayerOptions.minOpacity = this.minOpacity / 100;
      let gradientOption = {};
      this.gradientColor.forEach(item => {
        if (item.value !== '') {
          gradientOption[item.index] = item.value;
        }
      });
      maplayerOptions.gradient = gradientOption;
      for (const key in this.chartOptions.HeatMap) {
        if (this.chartOptions.HeatMap[key].subjectId === this.subjectId) {
          this.chartOptions.HeatMap[key].options = maplayerOptions;
        }
      }
      currentControl.options = this.chartOptions;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.currentId]: currentControl },
      });
    },
  },
};
</script>

<template>
  <div class="datav-heatmap-config">
    <Row>
      <Col span="24">
      <Collapse v-model="selected">
        <Panel name="1">
          <span class="property-label labeltitle">图层样式</span>
          <div slot="content">
            <Row>
              <Col span="10">
              <span class="property-label">半径：</span>
              </Col>
              <Col span="14">
              <InputNumber
                :max="50"
                :min="1"
                v-model="maplayerOptions.radius"
                @on-change="updateOptions"></InputNumber>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">热量最小不透明度：</span>
              </Col>
              <Col span="14">
              <Slider
                v-model="minOpacity"
                :min="0"
                :max="100"
                @on-change="updateOptions"></Slider>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">最大强度的缩放级别：</span>
              </Col>
              <Col span="14">
              <InputNumber
                :max="100"
                :min="1"
                v-model="maplayerOptions.maxZoom"
                @on-change="updateOptions"></InputNumber>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">最大点强度：</span>
              </Col>
              <Col span="14">
              <InputNumber
                :max="100"
                :min="1"
                v-model="maplayerOptions.max"
                @on-change="updateOptions"></InputNumber>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">模糊量：</span>
              </Col>
              <Col span="14">
              <InputNumber
                :max="100"
                :min="1"
                v-model="maplayerOptions.blur"
                @on-change="updateOptions"></InputNumber>
              </Col>
            </Row>
            <Row>
              <Col span="24">
              <span class="property-label">渐变配置:</span>
              </Col>
              <Col span="24">
              <Row
                v-for="(item, index) in gradientColor"
                :key="index"
              >
                <Col span="10">
                <span class="property-label gradient">{{ item.index }}：</span>
              </Col>
                <Col span="14">
                <ColorPicker
                  v-model="item.value"
                  @on-change="updateOptions"/>
              </Col>
              </Row>
              </Col>
            </Row>
          </div>
        </Panel>
      </Collapse>
      </Col>
    </Row>
  </div>
</template>

<style lang="less" scoped>
.datav-heatmap-config {
  width: 100%;
  height: 100%;

  .property-label {
    height: 32px;
    line-height: 32px;
  }

  /deep/.k-collapse-header {
    padding-left: 15px;
  }

  .k-row {
    margin-bottom: 5px;
  }

  .gradient {
    padding-left: 15px;
  }
}
</style>
